<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>Test de grabacion - comienzo</title>

  <link type="text/css" href="/static/css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
  <link href="/static/css/bootstrap/bootstrap.css" rel="stylesheet">
  <link type="text/css" href="/static/css/style.css" rel="stylesheet"/>
  <link type="text/css" href="/static/css/jgrowl/jquery.jgrowl.css" rel="stylesheet"/>

  <script type="text/javascript" src="/static/js/jquery-1.8.2.js"></script>
  <script type="text/javascript" src="/static/js/jquery-ui-1.9.1.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  <script type="text/javascript" src="/static/js/recorder.js"/></script>
  <script type="text/javascript" src="/static/js/jquery.jgrowl.js"></script>
</head>

<body onload="setup()">

<div id="jGrowl" class="jGrowl top-right">
  <div class="jGlowl-notification"></div>
</div>

<div class="container">

<h2 class="input">Grabando</h2>

<div class="container" id="wami_container">
  Hacé click en "Permitir" para acceder al microfono
  <div id="volume">
    <div id="saturation">Nivel de grabación: ---</div>
    <div id="meter" style="
      width: 0px;
      height: 10px;
      background-image:  url('/static/css/img/meter.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 0% 100%;">
    </div>
    <div id="wami"></div> 
  </div>
</div>

<div class="input">
  Hay que realizar distintas grabaciones. Se puede realizar varias veces hasta dejar la mejor.
</div>

<div id="tabs">

  <ul style="display: none;">
    {% for word in word_list %}
      <li><a href="#tabs-word-{{ word.id }}">Test word {{ word.description }}</a></li>
    {% endfor %}

    {% for phrase in phrase_list %}
      <li><a href="#tabs-phrase-{{ picture.id }}">Test Phrase {{ phrase.description }}</a></li>
    {% endfor %}

    {% for picture in pictures_list %}
      <li><a href="#tabs-pictures-{{ picture.id }}">Test Imagen {{ picture.description }}</a></li>
    {% endfor %}
  </ul>

  {% for word in word_list %}
    <div id="tabs-word-{{ word.id }}">Diga la siguiente palabra:

      <div style="text-align: center;">
        {{ word.text }}
      </div>

      <div style="text-align: center;">
        <input class="btn btn-danger record" type="button" value="Record" onclick="record('test-w{{ word.id }}', {{ word.id }})"></input>
        <input style="display: none;" class="btn btn-inverse stop" type="button" value="Stop" onclick="stop('test-w{{ word.id }}')"></input>
        <input disabled class="btn btn-success play" type="button" value="Play" onclick="play('test-w{{ word.id }}', {{ word.id }})"></input>
      </div>

    </div>
  {% endfor %}

  {% for phrase in phrase_list %}
    <div id="tabs-phrase-{{ phrase.id }}">Diga la siguiente frase:

      <div style="text-align: center;">
        {{ phrase.text }}
      </div>

      <div style="text-align: center;">
        <input class="btn btn-danger record" type="button" value="Record" onclick="record('test-ph{{ phrase.id }}', {{ phrase.id }})"></input>
        <input style="display: none;" class="btn btn-inverse stop" type="button" value="Stop" onclick="stop('test-ph{{ phrase.id }}')"></input>
        <input disabled class="btn btn-success play" type="button" value="Play" onclick="play('test-ph{{ phrase.id }}', {{ phrase.id }})"></input>
      </div>

    </div>
  {% endfor %}


  {% for picture in pictures_list %}
    <div id="tabs-pictures-{{ picture.id }}">Describa la imagen:

      <div style="text-align: center;">
        <img class="img-rounded" height="200px" width="auto" src="/media/{{ picture.image }}">
      </div>

      <div style="text-align: center;" class="input">
        <input class="btn btn-danger record" type="button" value="Record" onclick="record('test-pic{{ picture.id }}', {{ picture.id }})"></input>
        <input style="display: none;" class="btn btn-inverse stop" type="button" value="Stop" onclick="stop('test-pic{{ picture.id }}')"></input>
        <input disabled class="btn btn-success play" type="button" value="Play" onclick="play('test-pic{{ picture.id }}', {{ picture.id }})"></input>
      </div>

    </div>
  {% endfor %}

</div>

<button style="display: none;" class="input" id="previous-product"><</button>
<button class="btn btn-primary .btn-large input" id="next-product" onclick="$.jGrowl('Pasando proxima grabación');">Proxima grabacion</button>​

<table style="display: none;">

  {% for word in word_list %}
  <tr>
    <td>Test {{word.description}}</td>
    <td id="test-w{{word.id}}">No grabado</td>
  </tr>
  {% endfor %}

  {% for phrase in phrase_list %}
  <tr>
    <td>Test {{phrase.description}}</td>
    <td id="test-ph{{phrase.id}}">No grabado</td>
  </tr>
  {% endfor %}

  {% for picture in pictures_list %}
  <tr>
    <td>Test {{picture.description}}</td>
    <td id="test-pic{{picture.id}}">No grabado</td>
  </tr>
  {% endfor %}
</table>

<div id="test-contador" class="input">
</div>

<form action="/audios/confirm_audios/" method="post">
  <div class="input">
    <input class="btn btn-primary .btn-large" id="confirm" type="submit" disabled value="Confirmar grabación">
  </div>
</form>

</div>

</body>

<script type="text/javascript">

  var check_test = { 
    {% for word in word_list %}
      'test-w{{word.id}}': 0,
    {% endfor %}
    {% for phrase in phrase_list %}
      'test-ph{{phrase.id}}': 0,
    {% endfor %}
    {% for picture in pictures_list %}
      'test-pic{{picture.id}}': 0,
    {% endfor %}
  };

  function setup() {
    $( "#tabs").tabs({ 
      fx:[ { width: 'toggle', opacity: 'toggle' }, 
           { opacity: 'toggle' }]  });

    Wami.setup("wami");

    $('#next-product').click(function(){ 
      var $tabs = $('#tabs').tabs();
      var selected = $tabs.tabs('option', 'selected');
      $tabs.tabs('select', selected+1);
    });

    $('#previous-product').click(function() {
      var $tabs = $('#tabs').tabs();
      var selected = $tabs.tabs('option', 'selected');
      $tabs.tabs('select', selected-1);
    });

    $('#test-contador').html("Tests: 0 de "+(Object.keys(check_test).length));
  }

  var checkSaturation = null;

  function record(name_test, id_test) {
    //Wami.startRecording("http://localh0st:8000/audios/wamihandler2/?name_test="+name_test);

    var startfn = function() { console.debug("Grabando") };
    var finishedfn = function() { console.debug("Fin grabacion") };
    Wami.startRecording("http://elgatoloco.no-ip.org/audios/wamihandler2/?name_test="+name_test+"&id_test="+id_test,
      startfn(),
      finishedfn()
    );

    checkSaturation = function() {
      if (Wami !== undefined) {
        var level = Wami.getRecordingLevel();
        console.debug("Nivel de grabación: "+level);
        $("#saturation").html("Nivel de grabación: "+level);
        $("#meter").width(level);
        
        setTimeout(checkSaturation, 5);

        if (level > 50) {
          alert("Graba devuelta: mucha saturación");
        };
      }
    };
    
    checkSaturation();

    sleep1000 = function( part ) {
      if( part == 0 ) {
          setTimeout( function() { sleep1000( 1 ); }, 1000 );
      } else if( part == 1 ) {
        $.jGrowl('Grabando');

        $(".record").each( function() { $(this).hide() });
        $(".stop").each( function() { $(this).show() });
        $(".stop").each( function() { $(this).prop("disabled", false) });
        $(".play").each( function() { $(this).show() });
        $(".play").each( function() { $(this).prop("disabled", true) });
      }
    }
    
    sleep1000(0);
    //$.jGrowl('Grabando');
  }

  function play(name_test, id_test) {
    //Wami.startPlaying("http://localh0st:8000/audios/wamihandler2/?name_test="+name_test);

    var startfn = function() { console.debug("Reproduciendo") };
    var finishedfn = function() { console.debug("Fin Reproduccion") };
    Wami.startPlaying("http://elgatoloco.no-ip.org/audios/wamihandler2/?name_test="+name_test+"&id_test="+id_test,
      startfn(), 
      finishedfn()
    );

    checkSaturation = function() {
      if (Wami !== undefined) {
        var level = Wami.getPlayingLevel();
        console.debug("Nivel de grabación: "+level);
        $("#saturation").html("Nivel de grabación: "+level);
        $("#meter").width(level);
        
        setTimeout(checkSaturation, 5);
      }
    };
    checkSaturation();
  
    $.jGrowl('Reproduciendo');

    $(".play").each( function() { $(this).hide() });
    $(".stop").each( function() { $(this).show() });
    $(".stop").each( function() { $(this).prop("disabled", false) });
    $(".record").each( function() { $(this).show()});
    $(".record").each( function() { $(this).prop("disabled", true) });
  }

  function stop(name_test) {
    Wami.stopRecording();
    Wami.stopPlaying();
    
    checkSaturation = null;
    $("#saturation").html("Nivel de grabación: ---");

    check_test[name_test] = 1;

    $.jGrowl('Parar');

    $(".stop").each( function() { $(this).hide() });
    $(".record").each( function() { $(this).show() });
    $(".record").each( function() { $(this).prop("disabled", false) });
    $(".play").each( function() { $(this).show() });
    $(".play").each( function() { $(this).prop("disabled", false) });

    $(".record").show();

    $( "#"+name_test ).html("OK");

    var total_test = 1;
    var cant_test_ok = 0;
    $.each(check_test, function(index, value) { 
      total_test = total_test & value; 
      cant_test_ok = (value == 1) ? cant_test_ok + 1 : cant_test_ok;
    });

    $( "#test-contador").html("Tests: "+cant_test_ok+" de "+(Object.keys(check_test).length));

    if(total_test == 1){
      $("#confirm").prop('disabled', false);
    }
  }

</script>

</html>
